<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui.form小例子</title>
<link rel="stylesheet" href="./css/layui.css" media="all">
<script type="text/javascript" src="./jquery-2.1.4.min.js"></script>
</head>
<body style="background-image: url(img/a.gif)">

	<div style="width:50%;margin: 150px auto;background-color: rgba(0,0,0,0.5)">

	<div class="layui-tab">
		<ul class="layui-tab-title" lay-filter="login">
			<li class="layui-this">账户密码</li>
			<li id="rwm" >二维码</li>

		</ul>
		<div class="layui-tab-content">
			<div class="layui-tab-item layui-show">
				<form class="layui-form" action="loginServlet" method="post">
					<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
					<div class="layui-form-item">
						<label class="layui-form-label">输入框</label>
						<div class="layui-input-block">
							<input type="text" name="userName" placeholder="请输入用户名" autocomplete="off"
								class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">输入框</label>
						<div class="layui-input-block">
							<input type="password" name="pwd" placeholder="请输入密码" autocomplete="off"
								class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<button class="layui-btn" lay-submit lay-filter="formDemo">登录</button>
							<button type="reset" class="layui-btn layui-btn-primary">重置</button>
						</div>
					</div>
				</form>
			</div>
			<div class="layui-tab-item">
			
				<img alt="" id="img_rwm" src="PhoneCodeServlet">
			
			</div>

		</div>
	</div>
</div>
	<script src="layui.js"></script>
	<script>
		layui.use([ 'form', 'element' ], function() {
			var form = layui.form;
			var element = layui.element;
			var $ = layui.jquery;
			var layer = layui.layer;
			
			
			$("#rwm").on("click",function(){
				
				waitLoginAjax();
				
			})
			
			$("#img_rwm").on("click",function(){
				$(this).attr("src","PhoneCodeServlet?time="+new Date().getTime())
				waitLoginAjax();
			})
				      

			//各种基于事件的操作，下面会有进一步介绍
		});
		
		
		function waitLoginAjax(){
			
			
				$.post("checkLoginServlet",function(data){
					if(data == "ok"){
						location.href="index.jsp";
					}
					if(data == "timeout"){
						layer.alert("二维码以失效!");
						$("#img_rwm").attr("src","cc.png")
					}
				})

			
		}
	</script>
</body>
</html>